<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				border: 0;
				outline: none;
			}
			ul,li{
				list-style: none;
			}
			.lottery-turntable{
				position: relative;
				height: 300px;
				width: 300px;
				padding: 20px;
				margin: 20px auto;
				background-color: #c0381f;
				box-shadow: 0px 0px 10px #000;
				border-radius: 50%;
				overflow: hidden;
			}
			.sector{
				position: absolute;
				width: 150px;
				height: 150px;
				transform-origin: right bottom 0;
				-webkit-transform-origin: right bottom 0;
			}
			.sector:nth-child(2n+1){
				background-color: #fef6e0;
			}
			.sector:nth-child(2n){
				background-color: #ffffff;
			}
			.sector:nth-child(1){
				transform: rotate(0deg) skewY(54deg);
			}
			.sector:nth-child(2){
				transform: rotate(36deg) skewY(54deg);
			}
			.sector:nth-child(3){
				transform: rotate(72deg) skewY(54deg);
			}
			.sector:nth-child(4){
				transform: rotate(108deg) skewY(54deg);
			}
			.sector:nth-child(5){
				transform: rotate(144deg) skewY(54deg);
			}
			.sector:nth-child(6){
				transform: rotate(180deg) skewY(54deg);
			}
			.sector:nth-child(7){
				transform: rotate(216deg) skewY(54deg);
			}
			.sector:nth-child(8){
				transform: rotate(252deg) skewY(54deg);
			}
			.sector:nth-child(9){
				transform: rotate(288deg) skewY(54deg);
			}
			.sector:nth-child(10){
				transform: rotate(324deg) skewY(54deg);
			}
			.content{
				position: absolute;
				right: 0;
				bottom: 0;
				width: 80px;
				height: 150px;
				transform-origin: center center 0;
				transform: skewY(-54deg) rotate(-18deg) translate(0px,70px);
				text-align: center;
			}
			.content img{
				display: block;
				width: 40px;
				margin-left: 18px;
			}
			.content p{
				width: 30px;
				margin: 10px 0 0 23px;
				line-height: 16px;
				font-size: 12px;
				color: #666;
			}
			.pointer:before{
				content: '';
				position: absolute;
				left: 14px;
				top: -24px;
				border-width: 12px 6px;
				border-style: solid;
				border-color: transparent;
				border-bottom-color: #c0381f;
			}
			.light:nth-child(even){
				background-color: #fafce7;
				animation: twinkling 1s linear reverse infinite;
			}
			.light:nth-child(odd){
				background-color: #ffe58b;
				animation: twinkling 1s linear infinite;
			}
			@keyframes twinkling{
				50%{background: transparent;}
			}
			.turntable{
				width: 300px;
				height: 300px;
				border-radius: 50%;
				overflow: hidden;
				position: relative;
				background-color: #333;
			}
			.pointer{
				position: absolute;
				left: 150px;
				top: 150px;
				z-index: 10;
				height: 30px;
				width: 30px;
				padding: 6px;
				text-align: center;
				line-height: 30px;	
				background-color: #dc5b5b;
				border-radius: 50%;
				border: 1px solid #c038lf;
				cursor: pointer;
				font-size: 16px;
				color: #fff899;
			}
			.light{
				position: absolute;
				height: 10px;
				width: 10px;
				border-radius: 50%;
				top: 5px;
				left: 165px;
				transform-origin: 5px 165px;
			}
			.light:nth-child(even){
				background-color: #fafce7;
			}
			.light:nth-child(odd){
				background-color: #ffe58b;
			}
			.light:nth-child(2){
				transform: rotate(36deg);
			}
			.light:nth-child(3){
				transform: rotate(72deg);
			}
			.light:nth-child(4){
				transform: rotate(108deg);
			}
			.light:nth-child(5){
				transform: rotate(144deg);
			}
			.light:nth-child(6){
				transform: rotate(180deg);
			}
			.light:nth-child(7){
				transform: rotate(216deg);
			}
			.light:nth-child(8){
				transform: rotate(252deg);
			}
			.light:nth-child(9){
				transform: rotate(288deg);
			}
			.light:nth-child(10){
				transform: rotate(324deg);
			}
			.pointer:hover ~ .turntable{
				transition: transform 1s ease-in-out;
				transform: rotate(520deg) !important;
			}
		</style>
	</head>
	<body>
		<div class="lottery-turntable">
			<div class="pointer">GO</div>
			<div class="turntable">
				<div class="sector">
					<div class="content">
						<img src="img/smile.png" alt="谢谢参与">
						<p>谢谢参与</p>
					</div>
				</div>
				<div class="sector">
					<div class="content">
						<img src="img/umbrella.png" alt="雨伞">
						<p>雨伞</p>
					</div>
				</div>
				<div class="sector">
					<div class="content">
						<img src="img/front.jpg" alt="旅行">
						<p>旅行</p>
					</div>
				</div>
				<div class="sector">
					<div class="content">
						<img src="img/money.png" alt="现金">
						<p>现金</p>
					</div>
				</div>
				<div class="sector">
					<div class="content">
						<img src="img/phone-bill.png" alt="充值">
						<p>充值</p>
					</div>
				</div>
				<div class="sector">
					<div class="content">
						<img src="img/smile.png" alt="谢谢参与">
						<p>谢谢参与</p>
					</div>
				</div>
				<div class="sector">
					<div class="content">
						<img src="img/phone.png" alt="手机">
						<p>手机</p>
					</div>
				</div>
				<div class="sector">
					<div class="content">
						<img src="img/coupon.png" alt="积分">
						<p>积分</p>
					</div>
				</div>
				<div class="sector">
					<div class="content">
						<img src="img/pillow.png" alt="抱枕">
						<p>抱枕</p>
					</div>
				</div>
				<div class="sector">
					<div class="content">
						<img src="img/cup.png" alt="水杯">
						<p>水杯</p>
					</div>
				</div>
			</div>
			
			<ul class="light-wrapper">
				<li class="light"></li>
				<li class="light"></li>
				<li class="light"></li>
				<li class="light"></li>
				<li class="light"></li>
				<li class="light"></li>
				<li class="light"></li>
				<li class="light"></li>
				<li class="light"></li>
				<li class="light"></li>
			</ul>
		</div>
	</body>
</html>